/**
 * Created by huotaol on 2017/5/11.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Alert, Image, Linking, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import CustomStyle from "../../../common/style/CustomStyle";
import {Actions} from "react-native-router-flux";
import {connect} from "react-redux";

class BottomHandle extends Component {
    static propTypes = {
        carInfo: PropTypes.object,
    };

    render() {
        const {carInfo} = this.props;
        return (
            <View style={{
                height: CustomStyle.getActualSizeInVertical(98),
                alignItems: 'center',
                flexDirection: 'row',
                paddingRight: CustomStyle.getActualSizeInHorizontal(20),
                borderTopWidth: 1,
                borderTopColor: 'rgba(0,0,0,0.2)',
            }}>
                <TouchableOpacity
                    onPress={() => {
                        this._enterShop(carInfo.srcName, carInfo.sid);
                    }}
                    style={{
                        alignItems: 'center', justifyContent: 'center',
                        width: CustomStyle.getActualSizeInHorizontal(120),
                    }}>
                    <Image source={require('../../../img/cardetail/shop.png')}
                           resizeMode={'contain'}
                           style={{
                               width: CustomStyle.getActualSizeInHorizontal(38),
                               height: CustomStyle.getActualSizeInVertical(38),
                           }}/>
                    <Text style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(20),
                        color: '#857e6e',
                        marginTop: CustomStyle.getActualSizeInVertical(10),
                    }]}>商铺</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={() => {
                        Actions.HelpLook({carDetail: carInfo.title});
                    }}
                    style={[styles.btContainer, {
                        backgroundColor: '#ffc000',
                        flex: 1,
                        marginRight: CustomStyle.getActualSizeInHorizontal(10),
                    }]}>
                    <Text style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(35),
                        color: 'white',
                    }]}>预约帮看</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={() => {
                        this._callShop(carInfo.srcPhone)
                    }}
                    style={[styles.btContainer, {
                        backgroundColor: '#ff7200',
                        flex: 1,
                        marginLeft: CustomStyle.getActualSizeInHorizontal(10),
                    }]}>
                    <Text style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(35),
                        color: 'white',
                    }]}>联系商家</Text>
                </TouchableOpacity>

            </View>
        );
    }

    /*事件处理区域*/

    // Linking支持如下功能
    // url='http://www.lcode.org' 打开http网页
    // url='https://www.baidu.com' 打开https网页
    // url='smsto:18352402477'  发送短信
    // url='tel:18352402477' 打电话
    // url='mailto:jiangqqlmj@163.com' 发邮件
    _callShop(phone) {
        if (!phone) {
            return;
        }
        const url = 'tel:' + phone;
        Linking.canOpenURL(url).then(
            support => {
                if (support) {
                    Linking.openURL(url);
                } else {
                    Alert.alert('错误', '系统不支持此功能');
                }
            }
        ).catch(
            err => {
                Alert.alert('错误', err);
            }
        );
    }

    _enterShop(shopName, shopID) {
        if (shopName && shopID) {
            Actions.ShopDetail({id: shopID})
        }
    }
}

const styles = StyleSheet.create({
    btContainer: {
        width: CustomStyle.getActualSizeInHorizontal(260),
        height: CustomStyle.getActualSizeInVertical(78),
        borderRadius: CustomStyle.getActualSizeInHorizontal(39),
        alignItems: 'center',
        justifyContent: 'center',
    },
});

const mapStateToProps = (state) => {
    const {userData} = state;
    return {
        userData: userData,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(BottomHandle);